<template>
    <div class="myCoupon">
        <x-header :left-options="{showBack: true,backText:'我的优惠券'}" class="headerBox"></x-header>
        <!-- tab -->
        <tab
                v-model="tabIndex"
                default-color="#686868"
                active-color="#000"
                custom-bar-width="20px"
                bar-active-color="#1F7AFF"
        >
            <tab-item selected>未使用</tab-item>
            <tab-item>已使用</tab-item>
            <tab-item>已失效</tab-item>
        </tab>
        <swiper
                v-model="tabIndex"
                :show-dots="false"
                ref="cateSwiper"
                :min-moving-distance="2000"
                @on-get-height="getPageHeight"
        >
            <swiper-item v-for="(item, index) in listContent" :key="index">
                <!-- 未使用 -->
                <div v-if="item.title == '未使用'" class="courseBox">
                    <div class='inputs' style="display: none">
                        <input placeholder="请输入优惠码" auto-focus/>
                        <span>兑换</span>
                    </div>

                    <img src='../assets/images/nullmaterial06.png' class="emptyBox" v-if="item.coupons.length <= 0"/>

                    <div class='coupons' v-for="(coupon,index) in unusedCoupons" :key="index">
                        <div class='couponLeft'>
                            <div class='couponMoney'>
                                <div>￥<span>{{coupon.rate}}</span></div>
                                <div>{{coupon.ask01}}</div>
                            </div>
                            <div class='couponInfo'>
                                <div>{{coupon.code}}</div>
                                <div>{{coupon.endTimeTimeStr}}</div>
                                <div>{{coupon.ask02}}</div>
                            </div>
                        </div>
                        <div class='useBtn' @click="hreftwo(coupon.rate)">立即使用</div>
                    </div>
                </div>
                <!-- 已使用 -->
                <div v-if="item.title == '已使用'" class="courseBox">
                    <div v-if="item.title == '已失效'" class="courseBox">
                        <div class='coupons' v-for="(coupon,index) in usedCoupons" :key="index">
                            <div class='couponLeft'>
                                <div class='couponMoney invalid'>
                                    <div>￥<span>{{coupon.rate}}</span></div>
                                    <div>{{coupon.ask01}}</div>
                                </div>
                                <div class='couponInfo invalid'>
                                    <div>{{coupon.code}}</div>
                                    <div>{{coupon.endTimeTimeStr}}</div>
                                    <div>{{coupon.ask02}}</div>
                                </div>
                            </div>
                            <div class='invalidIcon'>
                                <img src='../assets/images/overdue01.png'/>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 已失效 -->
                <div v-if="item.title == '已失效'" class="courseBox">
                    <div class='coupons' v-for="(coupon,index) in expiredCoupons" :key="index">
                        <div class='couponLeft'>
                            <div class='couponMoney invalid'>
                                <div>￥<span>{{coupon.rate}}</span></div>
                                <div>{{coupon.ask01}}</div>
                            </div>
                            <div class='couponInfo invalid'>
                                <div>{{coupon.code}}</div>
                                <div>{{coupon.endTimeTimeStr}}</div>
                                <div>{{coupon.ask02}}</div>
                            </div>
                        </div>
                        <div class='invalidIcon'>
                            <img src='../assets/images/overdue01.png'/>
                        </div>
                    </div>
                </div>
            </swiper-item>
        </swiper>
    </div>
</template>

<script>
    import {XHeader, Tab, TabItem, Swiper, SwiperItem,} from "vux";
    import {myCoupon} from '@/api/index/study';
    import store from "../store/store";

    export default {
        components: {
            XHeader,
            Tab,
            TabItem,
            Swiper,
            SwiperItem,
        },
        data() {
            return {
                tabIndex: 0,
                // tab内容
                unusedCoupons: [],
                usedCoupons: [],
                expiredCoupons: [],
                courseId: 0,
                listContent: [
                    {
                        title: "未使用",
                        coupons: [
                            {
                                money: '100',
                                ask01: '满399可用',
                                couponName: '新人专享优惠券',
                                date: '2019/02/03-2019/03/03',
                                ask02: '全场通用'
                            },
                            {
                                money: '100',
                                ask01: '满399可用',
                                couponName: '新人专享优惠券',
                                date: '2019/02/03-2019/03/03',
                                ask02: '全场通用'
                            },
                        ]
                    },
                    {
                        title: "已使用"
                    },
                    {
                        title: "已失效",
                        coupons: [
                            {
                                money: '100',
                                ask01: '满399可用',
                                couponName: '新人专享优惠券',
                                date: '2019/02/03-2019/03/03',
                                ask02: '全场通用'
                            },
                            {
                                money: '100',
                                ask01: '满399可用',
                                couponName: '新人专享优惠券',
                                date: '2019/02/03-2019/03/03',
                                ask02: '全场通用'
                            },
                        ]
                    }
                ],
            }
        },
        created() {
            let courseId = this.$route.query.courseId;
            if (courseId != '') {
                this.courseId = courseId
            }

            myCoupon(this.$store.state.user.id, this.$store.state.user.tenantId).then(res => {
                console.log(res.data.data);
                this.unusedCoupons = res.data.data.list;
                this.usedCoupons = res.data.data.usedCoupons;
                this.expiredCoupons = res.data.data.expiredCoupons;
            }).catch(err => {
                console.log(err)
            });


        },
        methods: {
            hreftwo(rate) {
                if (this.courseId > 0) {
                    console.log(this.courseId);
                    this.$store.commit('setUser', {rate: rate});
                    this.$router.push({name: 'buyCourse', query: {id: this.courseId}})
                } else {
                    this.$store.commit('setUser', {rate: rate});
                    this.$router.push('/index');
                }


            },
            getPageHeight() {
                let topHeight = document.getElementsByClassName("vux-slider")[0]
                        .offsetTop,
                    diffHeight = window.screen.height - 44;
                this.$nextTick(() => {
                    this.$refs.cateSwiper.xheight = diffHeight + "px";
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .myCoupon {
        background-color: #f8f9fa;

        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }

            .vux-header-title {
                color: #000;
                font-size: 30px;
            }
        }

        .inputs {
            padding: 20px 30px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;

            input {
                background: #F2F4F6;
                padding: 20px;
                border-radius: 10px;
                width: 80%;
                border: 0;
            }

            span {
                font-size: 32px;
            }
        }

        .emptyBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
        }

        .coupons {
            margin: 20px;
            background: #fff;
            border-radius: 20px;
            padding: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .couponLeft {
                display: flex;
                align-items: center;

                .couponMoney {
                    color: #5799EA;
                    font-size: 24px;

                    div:first-child span {
                        font-size: 50px;
                        font-weight: 600;
                    }
                }

                .invalid {
                    color: #AAACAF !important;
                }

                .couponInfo {
                    margin-left: 30px;
                    font-size: 24px;

                    div:nth-child(2) {
                        margin-top: 10px;
                        color: #686868;
                    }

                    div:last-child {
                        margin-top: 10px;
                        color: #8E9194;
                    }
                }
            }

            .useBtn {
                background: #FF8F09;
                color: #fff;
                font-size: 24px;
                padding: 10px 20px;
                border-radius: 30px;
            }

            .invalidIcon img {
                width: 90px;
                height: 90px;
            }
        }


    }
</style>